<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div style="text-align: center;margin-top: 40px;">
      <form method="POST" id="">
        <input id="upimg" type="file" multiple />
      </form>
    </div>
    <div id="pics" style="text-align: center;"></div>
    <script src="../assets/vendors/jquery/jquery.min.js"></script>
    <script src="../assets/vendors/art-template/template-web.js"></script>

    <!-- 图片列表展示模板 -->
    <script type="text/html" id="imgList">
      <style>
          li{
              width: 100%;
              height: 120px;
              display: flex;
              justify-items: center;
              align-items: center;
          }
          li img{
              height: 110px;

          }
          li span{
              padding-left: 20px;
              font-size: 13px;
              font-weight: 600;
          }
      </style>
      <ul>
        {{each}}
        <li><img class="imglist" src="{{$value.path}}" alt="" /><span>{{$value.path}}</span></li>
        {{/each}}
      </ul>
    </script>

    <script>
      // 获取图片列表
      $.ajax({
        url: "/searchImg",
        type: "get",
        success: function (response) {
          console.log(response);
          var html = template("imgList", response);
          $("#pics").html(html);
        },
      });

      //文章封面图片上传功能
      $("#upimg").on("change", function () {
        //获取被选中的图片文件
        var file = this.files[0];
        console.log(file);
        //创建formdata对象，实现二进制文件上传
        var formData = new FormData();
        //将管理员选择到的文件以属性的方式追加到formdata对象中，其属性名为cover
        formData.append("thumbnail", file);

        $.ajax({
          url: "/upload",
          type: "post",
          data: formData,
          //告诉$.ajax方法不要处理ajax属性对应的参数
          processData: false,
          //由于参数类型在formdata中已经设置好了，所以此处告诉$.ajax不要设置参数类型
          contentType: false,
          success: function (response) {
            location.reload()
          },
        });
      });
    </script>
  </body>
</html>
